<template>
  <a-card>
    <a-form :model="form" :style="{ width: '100%' }">
      <a-row>
        <a-col v-for="item in formField" :span="6">
          <a-form-item
            :field="item.field"
            :label="item.label"
            :label-col-flex="item.colWidth ? item.colWidth : 'auto'"
          >
            <a-input
              v-if="item.type == 'input'"
              v-model="form[item.field]"
              :placeholder="item.placeholder"
            />
            <a-select
              v-else-if="item.type == 'select'"
              v-model="form[item.field]"
              :options="item.options"
              :placeholder="item.placeholder"
              @change="beginSearch"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item>
            <a-space>
              <a-button type="primary">查询</a-button>
              <a-button>重置</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script setup>
import { reactive, ref } from 'vue'
const props = defineProps({
  formField: {
    type: Array,
    default: () => []
  }
})

const form = ref({})
const handleSubmit = (data) => {
  console.log(data)
}

const emits = defineEmits(['search'])

const beginSearch = () => {
  emits('search', form.value)
}
</script>

<style lang="scss" scoped>
::v-deep .arco-form-item {
  margin-bottom: 0;
}
</style>